<template>
    <div class="PayPasswordDialog">
        <transition name="show">
            <div v-show="show" class="cover"></div>
        </transition>
            <transition name="modal">
                <div v-show="show" class="content">
                    <div class="header">
                        <gy-button class="close" font-name="icon-guanbi" @click="close"/>
                        <span>支付密码</span>
                    </div>
                    <div class="text">
                        <div class="item"><div class="value" v-if="password.length>=1"></div></div>
                        <div class="item"><div class="value" v-if="password.length>=2"></div></div>
                        <div class="item"><div class="value" v-if="password.length>=3"></div></div>
                        <div class="item"><div class="value" v-if="password.length>=4"></div></div>
                        <div class="item"><div class="value" v-if="password.length>=5"></div></div>
                        <div class="item"><div class="value" v-if="password.length>=6"></div></div>
                    </div>
                    <div class="message" @click="isShowPaypassword = true">忘记密码？找回并完成支付</div>
                    <div class="keyword">
                        <div class="row">
                            <div class="key active-black" @click="keyDown('1')">1</div>
                            <div class="key active-black" @click="keyDown('2')">2</div>
                            <div class="key active-black" @click="keyDown('3')">3</div>
                        </div>
                        <div class="row">
                            <div class="key active-black" @click="keyDown('4')">4</div>
                            <div class="key active-black" @click="keyDown('5')">5</div>
                            <div class="key active-black" @click="keyDown('6')">6</div>
                        </div>
                        <div class="row">
                            <div class="key active-black" @click="keyDown('7')">7</div>
                            <div class="key active-black" @click="keyDown('8')">8</div>
                            <div class="key active-black" @click="keyDown('9')">9</div>
                        </div>
                        <div class="row">
                            <div class="key" style="background-color: transparent;box-shadow: none;"></div>
                            <div class="key active-black" @click="keyDown('0')">0</div>
                            <div class="key active-black" @click="deleteKey" style="background-color: transparent;box-shadow: none;"> <gy-icon style="background-color: transparent;" font-name="icon-delete2"/></div>
                        </div>
                    </div>
                </div>
            </transition>
        <!--        设置支付密码-->
        <modal v-show="isShowPaypassword" title="支付密码" @close="isShowPaypassword = false" @sure="setPaypassword">
            <set-paypassword slot="content"/>
        </modal>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import GyIcon from "@/components/GyIcon.vue";
import GyButton from "@/components/GyButton.vue";
import {SHOW_PAY_PASSWORD_DIALOG} from "@/store/MutationTypes";
import SetPaypassword from "@/components/SetPaypassword.vue";
import Modal from "@/components/Modal.vue";
@Component({
    name: 'PayPasswordDialog',
    components: {Modal, SetPaypassword, GyButton, GyIcon}
})
export default class extends Vue {
    // 显示设置支付密码弹窗
    private isShowPaypassword: boolean = false;
    private get show(): boolean {
        if (this.$store.state.payPassword) {
            return true;
        } else {
            return false;
        }
    }
    private password: string[] = [];
    private close(): void {
        this.$store.dispatch(SHOW_PAY_PASSWORD_DIALOG, undefined);
    }
    private keyDown(key: string): void {
        if (this.password.length < 6) {
            this.password.push(key);
        }
    }
    private deleteKey(): void {
        if (this.password.length >0) {
            this.password.pop();
        }
    }
    private get PLength(): number {
        return this.password.length;
    }
    @Watch('PLength')
    private onPLengthChange(): void {
        if (this.password.length === 6) {
            let str = '';
            for (let i = 0; i < this.password.length; i++) {
                str += this.password[i];
            }
            if (this.show) {
                this.$store.state.payPassword(str);
            }
        }
    }
    @Watch('show')
    private onShowChange(): void {
        this.password = [];
    }
    /**
     * 设置支付密码
     */
    private setPaypassword(): void {
        this.isShowPaypassword = false;
        this.$common.toast({
            mes: '支付密码设置成功',
            icon: 'success'
        });
        // @ts-ignore
        console.log(SetPaypassword.params);
        if (this.show) {
            this.$store.state.payPassword('88888');
        }
    }
    @Watch('isShowPaypassword')
    private onIsShowPaypasswordChange(): void {
        if (!this.isShowPaypassword) {
            // @ts-ignore
            if (SetPaypassword.reset) {
                // @ts-ignore
                SetPaypassword.reset();
            }
        }
    }
}
</script>

<style scoped lang="less">
.PayPasswordDialog {
    & .cover {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1000;
    }
    & .content {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 8.5rem;
        background-color: white;
        z-index: 1001;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        & .header {
            height: 1.0rem;
            line-height: 1.0rem;
            color: black;
            font-size: 0.34rem;
            text-align: center;
            position: relative;
            width: 6.3rem;
            border-bottom: 0.02rem solid #D8D8D8;
            & .close {
                position: absolute;
                width: 1.0rem;
                height: 0.98rem;
                text-align: center;
                line-height: 1.0rem;
                left: -0.3rem;
                top: 0;
            }
        }
        & .text {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            width: 6.3rem;
            margin-top: 0.3rem;
            & .item {
                width: 0.96rem;
                height: 0.86rem;
                border-radius: 0.1rem;
                border: 0.02rem solid #D1D1D1;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                & .value {
                    display: inline-block;
                    width: 0.2rem;
                    height: 0.2rem;
                    border-radius: 0.5rem;
                    background-color: black;
                    font-size: 0;
                }
            }
        }
        & .message {
            color: #0073F8;
            font-size: 0.24rem;
        }
        & .keyword {
            width: 7.5rem;
            height: 4.52rem;
            /*margin-bottom: 0.58rem;*/
            background-color: #D2D5DB;
            padding: 0.12rem 0.16rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            & .row {
                display: flex;
                flex-direction: row;
                width: 7.26rem;
                justify-content: space-between;
                align-items: center;
                & .key {
                    width: 2.34rem;
                    height: 0.98rem;
                    text-align: center;
                    line-height: 0.98rem;
                    background-color: white;
                    border-radius: 0.1rem;
                    user-select: none;
                    font-size: 0.5rem;
                    font-weight: 600;
                    box-shadow: 0 0.02rem 0 0 rgba(132,134,136,1);;
                }
            }
        }
    }
}
    .show {
        display: block;
        background-color: rgba(0, 0, 0, 0.5);
        animation: show 300ms;
    }
    @keyframes show {
        0% {background-color: rgba(0, 0, 0, 0.0)}
        100% {background-color: rgba(0, 0, 0, 0.5)}
    }
.show-enter-active {
    transition: all 0.1s ease;
}
.show-leave-active {
    transition: all .3s ease;
}
.show-enter, .show-leave-to {
    opacity: 0;
}
.modal-enter-active {
    transition: all 0.2s ease;
}
.modal-leave-active {
    transition: all .2s ease;
}
.modal-enter, .modal-leave-to {
    transform: translateY(8.5rem);
}
</style>
